<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> 
<html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>酒店展示页面</title>
        <meta name="description" content="GARO is a real-estate template">
        <meta name="author" content="Kimarotec">
        <meta name="keyword" content="html5, css, bootstrap, property, real-estate theme , bootstrap template">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800' rel='stylesheet' type='text/css'>

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="icon" href="favicon.ico" type="image/x-icon">

        <link rel="stylesheet" href="./HotelUser/assets/css/normalize.css">
        <link rel="stylesheet" href="./HotelUser/assets/css/font-awesome.min.css">
        <link rel="stylesheet" href="./HotelUser/assets/css/fontello.css">
        <link href="./HotelUser/assets/fonts/icon-7-stroke/css/pe-icon-7-stroke.css" rel="stylesheet">
        <link href="./HotelUser/assets/fonts/icon-7-stroke/css/helper.css" rel="stylesheet">
        <link href="./HotelUser/assets/css/animate.css" rel="stylesheet" media="screen">
        <link rel="stylesheet" href="./HotelUser/assets/css/bootstrap-select.min.css"> 
        <link rel="stylesheet" href="./HotelUser/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="./HotelUser/assets/css/icheck.min_all.css">
        <link rel="stylesheet" href="./HotelUser/assets/css/price-range.css">
        <link rel="stylesheet" href="./HotelUser/assets/css/owl.carousel.css">  
        <link rel="stylesheet" href="./HotelUser/assets/css/owl.theme.css">
        <link rel="stylesheet" href="./HotelUser/assets/css/owl.transitions.css">
        <link rel="stylesheet" href="./HotelUser/assets/css/style.css">
        <link rel="stylesheet" href="./HotelUser/assets/css/responsive.css">
    </head>
    <body>

        <div id="preloader">
            <div id="status">&nbsp;</div>
        </div>
        <!-- Body content -->
    
       
        <div class="header-connect">
            <div class="container">
                <div class="row">
                    <div class="col-md-5 col-sm-8  col-xs-12">
                        <div class="header-half header-call">
                            <p>
                                <span><i class="pe-7s-call"></i> +1 234 567 7890</span>
                                <span><i class="pe-7s-mail"></i> your@company.com</span>
                            </p>
                        </div>
                    </div>
                    <div class="col-md-2 col-md-offset-5  col-sm-3 col-sm-offset-1  col-xs-12">
                        <div class="header-half header-social">
                            <ul class="list-inline">
                                <!-- <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fa fa-vine"></i></a></li>
                                <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                                <li><a href="#"><i class="fa fa-instagram"></i></a></li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>       
        <!--End top header -->

        <nav class="navbar navbar-default ">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html"><img src="./HotelUser/assets/img/logo.png" alt=""></a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse yamm" id="navigation">
                    <div class="button navbar-right" id="login">
                        <!-- <button class="navbar-btn nav-button wow bounceInRight login" onclick=" window.open('register.html')" data-wow-delay="0.4s">Login</button>
                        <button class="navbar-btn nav-button wow fadeInRight" onclick=" window.open('submit-property.html')" data-wow-delay="0.5s">Submit</button> -->
                    </div>
                    <ul class="main-nav nav navbar-nav navbar-right">
                        <li class="wow fadeInDown" data-wow-delay="0.1s">
                            <a href="./HotelUser-message&ordes.html" class="dropdown-toggle"  >个人中心</a>
                            <!-- <ul class="dropdown-menu navbar-nav">
                                <li>
                                    <a href="index-2.html">Home Style 2</a>
                                </li>
                                <li>
                                    <a href="index-3.html">Home Style 3</a>
                                </li>
                                <li>
                                    <a href="index-4.html">Home Style 4</a>
                                </li>
                                <li>
                                    <a href="index-5.html">Home Style 5</a>
                                </li>

                            </ul> -->
                        </li>

                        <li class="wow fadeInDown" data-wow-delay="0.1s"><a class="dropdown-toggle active" href="#">预订酒店</a></li>
                        <li class="wow fadeInDown" data-wow-delay="0.1s"><a class="" href="./HotelUser-shop.html">精品商城</a></li>
                        <li class="dropdown yamm-fw" data-wow-delay="0.1s">
                            <a href="#" class="dropdown-toggle" >点餐堂食</a>
                            
                        </li>

                        <!-- <li class="wow fadeInDown" data-wow-delay="0.4s"><a href="contact.html">尊享服务</a></li> -->
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
        <!-- End of nav bar -->

        <div class="page-head"> 
            <div class="container">
                <div class="row">
                    <div class="page-head-content">
                        <h1 class="page-title">凤嘉昶客栈</h1>               
                    </div>
                </div>
            </div>
        </div>
        <!-- End page header -->

        <!-- property area -->
        <div class="properties-area recent-property" style="background-color: #FFF;">
            <div class="container">  
                <div class="row">
                     
                <div class="col-md-3 p0 padding-top-40">
                    <div class="blog-asside-right pr0">
                        <div class="panel panel-default sidebar-menu wow fadeInRight animated" >
                            <div class="panel-heading">
                                <h3 class="panel-title">搜索房型</h3>
                            </div>
                            <div class="panel-body search-widget">
                                <form action="" class=" form-inline"> 
                                    <fieldset>
                                        <div class="row">
                                            <div class="col-xs-12">
                                                <input type="text" name="keyword" class="form-control" placeholder="请输入关键字">
                                            </div>
                                        </div>
                                    </fieldset>
                        

                                    <fieldset >
                                        <div class="row">
                                            <div class="col-xs-12">  
                                                <input onclick="search();" class="button btn largesearch-btn" value="Search" type="submit">
                                            </div>  
                                        </div>
                                    </fieldset>                                     
                                </form>
                            </div>
                        </div>

                        <div class="panel panel-default sidebar-menu wow fadeInRight animated">
                            <div class="panel-heading">
                                <h3 class="panel-title">热门推荐</h3>
                            </div>
                            <div class="panel-body recent-property-widget">
                                        <ul id="recommend">
                                        <!-- <li>
                                            <div class="col-md-3 col-sm-3 col-xs-3 blg-thumb p0">
                                                <a href="single.html"><img src="./HotelUser/assets/img/demo/small-property-2.jpg"></a>
                                                <span class="property-seeker">
                                                    <b class="b-1">A</b>
                                                    <b class="b-2">S</b>
                                                </span>
                                            </div>
                                            <div class="col-md-8 col-sm-8 col-xs-8 blg-entry">
                                                <h6> <a href="single.html">大床房</a></h6>
                                                <span class="property-price">3000000$</span>
                                            </div>
                                        </li> -->

                                    </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-9  pr0 padding-top-40 properties-page">
                    <div class="col-md-12 clear"> 
                        <div class="col-xs-10 page-subheader sorting pl0">
                            <ul class="sort-by-list" id="sortlist">
                                <!-- <div class="sort layui-clear">
                                    <a class="active" href="javascript:;" event = 'volume'>房间大小</a>
                                    <a href="javascript:;" event = 'price'>房间价格价格</a>
                                    <a href="javascript:;" event = 'newprod'>新品</a> 
                                  </div> -->
                                <!-- <li class="">
                                    <a href="javascript:void(1);" class="order_by_date" data-orderby="property_date" data-order="ASC">
                                        房间大小 <i class="fa fa-sort-amount-asc"></i>					
                                    </a>
                                </li>
                                <li class="">
                                    <a href="javascript:void(0);" class="order_by_price" data-orderby="property_price" data-order="DESC">
                                        房价价格<i class="fa fa-sort-numeric-desc"></i>						
                                    </a>
                                </li> -->
                            </ul><!--/ .sort-by-list-->

                            <div class="items-per-page">
                                <label for="items_per_page"><b>每页展示数量 :</b></label>
                                <div class="sel">
                                    <select id="items_per_page" name="per_page">
                                        <option value="1">1</option>
                                        <option value="3">3</option>
                                        <option value="6">6</option>
                                        <option value="9">9</option>
                                        <option value="12">12</option>
                                        <option value="15">15</option>
                                        <option value="30">30</option>
                                        <option value="45">45</option>
                                        <option value="60">60</option>
                                    </select>
                                </div><!--/ .sel-->
                            </div><!--/ .items-per-page-->
                        </div>

                        <div class="col-xs-2 layout-switcher">
                            <a class="layout-list" href="javascript:void(0);"> <i class="fa fa-th-list"></i>  </a>
                            <a class="layout-grid active" href="javascript:void(0);"> <i class="fa fa-th"></i> </a>                          
                        </div><!--/ .layout-switcher-->
                    </div>

                        <div class="col-md-12 clear"> 
                            <div id="list-type" class="proerty-th">
                            <!-- 插入房型 -->

                                
                            </div>
                        </div>
                    
                    <div class="col-md-12"> 
                        <div class="pull-right">
                            <div class="pagination" >
                                <ul id="pagerow">
                                    <!-- <li><a href="#">首页</a></li>
                                    <li><a href="#">前一页</a></li>                          
                                     <span><b>第 <b style="color: #d27e04;font-size: larger;">9</b> 页</b></span>       
                                    <li><a href="#">下一页</a></li>
                                    <li><a href="#">尾页</a></li>
                                    <span>共 <b>9</b> 页</span>
                                    <li ><span style="border-right: none;">到第</span><span><input type="number" style="width: 80px;" class="pageInput" value="1"/>页</span></li>                                                           
                                    <li><a href="#" id="jumpto" style="color: black;">确定</a></li>   -->
                                </ul>
                               
                            </div>
                        </div>                
                    </div>
                </div>  
                </div>              
            </div>
        </div>

          <!-- Footer area-->
        
          <!-- <script src="./plugins/jquery/jquery.min.js"></script> -->
      <script src="./HotelUser/assets/js/modernizr-2.6.2.min.js"></script>
        <script src="./HotelUser/assets/js/jquery-1.10.2.min.js"></script>
        <script src="./HotelUser/bootstrap/js/bootstrap.min.js"></script>
        <script src="./HotelUser/assets/js/bootstrap-select.min.js"></script>
        <script src="./HotelUser/assets/js/bootstrap-hover-dropdown.js"></script>
        <script src="./HotelUser/assets/js/easypiechart.min.js"></script>
        <script src="./HotelUser/assets/js/jquery.easypiechart.min.js"></script>
        <script src="./HotelUser/assets/js/owl.carousel.min.js"></script>
        <script src="./HotelUser/assets/js/wow.js"></script>
        <script src="./HotelUser/assets/js/icheck.min.js"></script>
        <script src="./HotelUser/assets/js/price-range.js"></script>
        <script src="./HotelUser/assets/js/main.js"></script>
        <script src="./json-test/hotel.js"></script>
        <script>
            function saerch(){
                
            }
                var user = JSON.parse(localStorage.getItem("nowuser"));
      console.log("user=", user);
      if(user==null){
  window.location.href='./index.html'
}
// else{
//   var l=''

//   l+="<button class='navbar-btn nav-button wow fadeInRight' onclick='bye();'>退出</button>"
//   document.getElementById('login').innerHTML=l;
// }
function bye(){
  alert("退出咯")
  window.location.href='./index.html',
  localStorage.clear();
}
        </script>
        <script>

            //页面数量索引
            var sindex=[1,3,6,9,12,15,30,45,60];
            console.log(sindex)
            var PageSize=0;//每页长度
            var count=0;//数据总数量
            var currentPage =1;//当前页，默认为1。
            var PageCount=0;//总页数
            //判断本地
            console.log('hotel')
            console.log(localStorage.getItem('hotelPageSize'))
            if(localStorage.getItem('hotelPageSize')===null)
                PageSize=12;
            else
                PageSize=localStorage.getItem('hotelPageSize');
            console.log("PageSize="+PageSize);
            var sortdiv='';
            sortdiv+="<li class=''>"+
                            "<a href='javascript:a1();' class='order_by_date' data-orderby='property_date' data-order='ASC'>"+
                                "房间大小 <i class='fa fa-sort-amount-asc'></i>"+					
                            "</a>"+
                        "</li>"+
                        "<li class=''>"+
                            "<a href='javascript:b1(1);' class='order_by_price' data-orderby='property_price' data-order='DESC'>"+
                                "房价价格<i class='fa fa-sort-numeric-asc'></i>"+						
                            "</a>"+
                        "</li>"
            document.getElementById('sortlist').innerHTML=sortdiv;
            //推荐排序

            // localStorage.clear() 可以清除localStorage中所有的key

            //     methods: {
            //         clear_data() {
            //             localStorage.clear();
            //         }
            //     }
            // 当然我们也可以通过removeItem(key)的形式来移除
             // 页面变化函数
             //跳转到详情页
             function jumptodetails(data){
                // alert(data);
                var ac=data
                console.log(ac)
                localStorage.setItem('hoteldetailsdata',JSON.stringify(data))
             
                //路径+参数名+参数值
                window.location.href = './HotelUser-hotel-details.html?'+'id='+data.id
                //2.下面这种方式将数据进行编码，可以传递中文不出现乱码，推荐
                // window.location.href = encodeURI('./02.html?uname=哈哈');


            };
             function jump(num){
               var PageCount=parseInt(localStorage.getItem('hotelPageCount'))
                console.log("jpag="+PageCount)
                if(num>PageCount){
                    console.log(123)
                    alert("当前页面已为最后一页")
                }
                else if(num<1)
                {
                    alert("页面最小页为1")
                }
                else if(num>=1){
                    currentPage=num;
                    var numbb=0;
                    if(count<PageSize*currentPage){
                        numbb=count;
                    }
                    else{
                        numbb=PageSize*currentPage;
                    }
                    var h2='';
                    var n=JSON.parse(localStorage.getItem('hoteldata'));
                    for(i=(currentPage-1)*PageSize;i<numbb;i++){ 
                        console.log("n="+n)
                        console.log("n[i]="+n[i])
                        console.log("i="+i) 
                        var objn=''
                        objn=JSON.stringify(n[i])
                        // console.log("n[i]="+n[i])
                        console.log("objn=",objn)
                        // console.log("i="+n[i].name)                
                        h2+="<div class='col-sm-6 col-md-4 p0'>"+
                        "<div class='box-two proerty-item'>"+
                        "<div class='item-thumb' onclick='jumptodetails("+objn+");'>"+
                        "<a href='property-1.html' ><img src='./HotelUser/assets/img/demo/property-1.jpg'></a>"+
                        "</div>"+
                        "<div class='item-entry overflow'>"+
                        "<h5><a   href='#'>"+n[i].name+"</a><span class='proerty-price pull-right'>￥"+n[i].dayPrice+"</span></h5>"+
                        "<div class='dot-hr'></div>"+
                        "<span class='pull-left'><b> 面积 :</b> "+n[i].roomArea+"m²</span> <br>"+
                        // "<span class='pull-left'><b> 是否含早 :</b> "+"是"+" </span> <br>"+
                        // "<span class='pull-left'><b> 有无窗户 :</b>"+"有"+" </span> <br>"+
                        // "<span class='pull-left'><b> 是否有WiFi :</b>"+"是"+"</span> <br>"+
                        "<p style='display: none;'>"+n[i].describe+"</p>"+
                        "<div class='property-icon'>"+
                        "<img src='./HotelUser/assets/img/icon/bed.png'>  ("+n[i].numberOfBed+") |"+
                        "<img src='./HotelUser/assets/img/icon/shawer.png'>  ("+"2"+") |"+
                        "<!-- <img src='./HotelUser/assets/img/icon/cars.png'>(1) -->"+
                        "</div>"+
                        "</div>"+
                        "</div>"+
                        "</div>"
                    }
                    document.getElementById('list-type').innerHTML=h2;
                    var pg=''
                    pg+="<li onclick='jump("+1+");'><a  href='#'>首页</a></li>"+
                        "<li onclick='jump("+(currentPage-1)+");'><a  href='#'>前一页</a></li>"+                
                        "<span><b>第 <b style='color: #d27e04;font-size: larger;'>"+currentPage+"</b> 页</b></span>"+      
                        "<li onclick='jump("+(currentPage+1)+");'><a  href='#'>下一页</a></li>"+
                        "<li><a onclick='jump("+PageCount+");' href='#'>尾页</a></li>"+
                        "<span>共 <b>"+PageCount+"</b> 页</span>"+
                        "<li ><span style='border-right: none;'>到第</span><span><input id='jumptext' type='number' style='width: 80px;' class='pageInput' value='"+currentPage+"'/>页</span></li>"+                                                         
                        "<li onclick='okay();'><a  href='#' style='color: black;'>确定</a></li>"
                        document.getElementById('pagerow').innerHTML=pg;
                }
           

            }


            function jump2(num){
               var PageCount=parseInt(localStorage.getItem('hotelPageCount'))
                console.log("jpag="+PageCount)
                if(num>PageCount){
                    console.log(123)
                    alert("当前页面已为最后一页")
                }
                else if(num<1)
                {
                    alert("页面最小页为1")
                }
                else if(num>=1){
                    currentPage=num;
                    var numbb=0;
                    if(count<PageSize*currentPage){
                        numbb=count;
                    }
                    else{
                        numbb=PageSize*currentPage;
                    }
                    var h2='';
                    // console.log(localStorage.getItem('hotelsortdata'))
                    var n=JSON.parse(localStorage.getItem('hotelsortdata'));
                    console.log(n)
                    for(i=(currentPage-1)*PageSize;i<numbb;i++){ 
                        console.log("n="+n)
                        console.log("n[i]=",n[i].name)
                        console.log("i="+i) 
                        var objn=''
                        objn=JSON.stringify(n[i])
                        // console.log("n[i]="+n[i])
                        console.log("objn=",objn)               
                        h2+="<div class='col-sm-6 col-md-4 p0'>"+
                        "<div class='box-two proerty-item'>"+
                        "<div class='item-thumb' onclick='jumptodetails("+objn+");'>"+
                        "<a href='#' ><img src='./HotelUser/assets/img/demo/property-1.jpg'></a>"+
                        "</div>"+
                        "<div class='item-entry overflow'>"+
                        "<h5><a   href='#'>"+n[i].name+"</a><span class='proerty-price pull-right'>￥"+n[i].dayPrice+"</span></h5>"+
                        "<div class='dot-hr'></div>"+
                        "<span class='pull-left'><b> 面积 :</b> "+n[i].roomArea+"m²</span> <br>"+
                        // "<span class='pull-left'><b> 是否含早 :</b> "+"是"+" </span> <br>"+
                        // "<span class='pull-left'><b> 有无窗户 :</b>"+"有"+" </span> <br>"+
                        // "<span class='pull-left'><b> 是否有WiFi :</b>"+"是"+"</span> <br>"+
                        "<p style='display: none;'>"+n[i].describe+"</p>"+
                        "<div class='property-icon'>"+
                        "<img src='./HotelUser/assets/img/icon/bed.png'>  ("+n[i].numberOfBed+") |"+
                        "<img src='./HotelUser/assets/img/icon/shawer.png'>  ("+"2"+") |"+
                        "<!-- <img src='./HotelUser/assets/img/icon/cars.png'>(1) -->"+
                        "</div>"+
                        "</div>"+
                        "</div>"+
                        "</div>"
                    }
                    document.getElementById('list-type').innerHTML=h2;
                    var pg=''
                    pg+="<li onclick='jump("+1+");'><a  href='#'>首页</a></li>"+
                        "<li onclick='jump("+(currentPage-1)+");'><a  href='#'>前一页</a></li>"+                
                        "<span><b>第 <b style='color: #d27e04;font-size: larger;'>"+currentPage+"</b> 页</b></span>"+      
                        "<li onclick='jump("+(currentPage+1)+");'><a  href='#'>下一页</a></li>"+
                        "<li><a onclick='jump("+PageCount+");' href='#'>尾页</a></li>"+
                        "<span>共 <b>"+PageCount+"</b> 页</span>"+
                        "<li ><span style='border-right: none;'>到第</span><span><input id='jumptext' type='number' style='width: 80px;' class='pageInput' value='"+currentPage+"'/>页</span></li>"+                                                         
                        "<li onclick='okay();'><a  href='#' style='color: black;'>确定</a></li>"
                        document.getElementById('pagerow').innerHTML=pg;
                }
           
            }
            
            //排序 小到大面积
            function sortArea1(a,b){
                return a.roomArea-b.roomArea;
            }
            //排序 大到小面积
            function sortArea2(a,b){
                return b.roomArea-a.roomArea;
            }
            //排序 小到大面积
            function sortPrice1(a,b){
                return a.dayPrice-b.dayPrice;
            }
            //排序 大到小面积
            function sortPrice2(a,b){
                return b.dayPrice-a.dayPrice;
            }  
            //a下下
           function a1(){
             
                var n=JSON.parse(localStorage.getItem('hoteldata'));
                console.log("a下下+n="+n[0].name);
                var n1=n.sort(sortArea1);
                localStorage.setItem('hotelsortdata',JSON.stringify(n1))
                // console.log(n);
                var sortdiv='';
            sortdiv+="<li class='active'>"+
                            "<a href='javascript:a3();' class='order_by_date' data-orderby='property_date' data-order='ASC'>"+
                                "房间大小 <i class='fa fa-sort-amount-asc'></i>"+					
                            "</a>"+
                        "</li>"+
                        "<li class=''>"+
                            "<a href='javascript:b1();' class='order_by_price' data-orderby='property_price' data-order='ASC'>"+
                                "房价价格<i class='fa fa-sort-numeric-asc'></i>"+						
                            "</a>"+
                        "</li>"
            document.getElementById('sortlist').innerHTML=sortdiv;
            var cPage =1;//当前页，默认为1。
            jump2(cPage)
            }
            //a下上
            function a2(dex){
                var n=JSON.parse(localStorage.getItem('hoteldata'));
                console.log("a下上");
                var n1=n.sort(sortArea1);
                localStorage.setItem('hotelsortdata',JSON.stringify(n1))
                // console.log(n);
                var sortdiv='';
            sortdiv+="<li class='active'>"+
                            "<a href='javascript:a4();' class='order_by_date' data-orderby='property_date' data-order='ASC'>"+
                                "房间大小 <i class='fa fa-sort-amount-asc'></i>"+					
                            "</a>"+
                        "</li>"+
                        "<li class=''>"+
                            "<a href='javascript:b2();' class='order_by_price' data-orderby='property_price' data-order='DESC'>"+
                                "房价价格<i class='fa fa-sort-numeric-desc'></i>"+						
                            "</a>"+
                        "</li>"
            document.getElementById('sortlist').innerHTML=sortdiv;
            var cPage =1;//当前页，默认为1。
            jump2(cPage)
            } 
            //a上下
            function a3(){
                var n=JSON.parse(localStorage.getItem('hoteldata'));
                console.log('a上下');
                var n1=n.sort(sortArea2);
                localStorage.setItem('hotelsortdata',JSON.stringify(n1))
                // console.log(n);
                var sortdiv='';
            sortdiv+="<li class='active'>"+
                            "<a href='javascript:a1();' class='order_by_date' data-orderby='property_date' data-order='DESC'>"+
                                "房间大小 <i class='fa fa-sort-amount-desc'></i>"+					
                            "</a>"+
                        "</li>"+
                        "<li class=''>"+
                            "<a href='javascript:b3();' class='order_by_price' data-orderby='property_price' data-order='ASC'>"+
                                "房价价格<i class='fa fa-sort-numeric-asc'></i>"+						
                            "</a>"+
                        "</li>"
            document.getElementById('sortlist').innerHTML=sortdiv;
            var cPage =1;//当前页，默认为1。
            jump2(cPage)
            }    
            //a上上
            function a4(){
                var n=JSON.parse(localStorage.getItem('hoteldata'));
                console.log("a上上");
                var n1=n.sort(sortArea2);
                localStorage.setItem('hotelsortdata',JSON.stringify(n1))
                // console.log(n);
                var sortdiv='';
            sortdiv+="<li class='active'>"+
                            "<a href='javascript:a2();' class='order_by_date' data-orderby='property_date' data-order='DESC'>"+
                                "房间大小 <i class='fa fa-sort-amount-desc'></i>"+					
                            "</a>"+
                        "</li>"+
                        "<li class=''>"+
                            "<a href='javascript:b1();' class='order_by_price' data-orderby='property_price' data-order='DESC'>"+
                                "房价价格<i class='fa fa-sort-numeric-desc'></i>"+						
                            "</a>"+
                        "</li>"
            document.getElementById('sortlist').innerHTML=sortdiv;
            var cPage =1;//当前页，默认为1。
            jump2(cPage)
            }   
            //b下下    
            function b1(){
                var n=JSON.parse(localStorage.getItem('hoteldata'));
                console.log("b下下");
                
                var n1=n.sort(sortPrice1);
                localStorage.setItem('hotelsortdata',JSON.stringify(n1))
                // console.log(n);
                var sortdiv='';
            sortdiv+="<li class=''>"+
                            "<a href='javascript:a1();' class='order_by_date' data-orderby='property_date' data-order='ASC'>"+
                                "房间大小 <i class='fa fa-sort-amount-asc'></i>"+					
                            "</a>"+
                        "</li>"+
                        "<li class='active'>"+
                            "<a href='javascript:b2();' class='order_by_price' data-orderby='property_price' data-order='ASC'>"+
                                "房价价格<i class='fa fa-sort-numeric-asc'></i>"+						
                            "</a>"+
                        "</li>"
            document.getElementById('sortlist').innerHTML=sortdiv;
            var cPage =1;//当前页，默认为1。
            jump2(cPage)
            }  
            //b下上
            function b2(){
                var n=JSON.parse(localStorage.getItem('hoteldata'));
                console.log("//b下上");
                var n1=n.sort(sortPrice2);
                localStorage.setItem('hotelsortdata',JSON.stringify(n1))
                // console.log(n);
                var sortdiv='';
            sortdiv+="<li class=''>"+
                            "<a href='javascript:a2();' class='order_by_date' data-orderby='property_date' data-order='ASC'>"+
                                "房间大小 <i class='fa fa-sort-amount-asc'></i>"+					
                            "</a>"+
                        "</li>"+
                        "<li class='active'>"+
                            "<a href='javascript:b1();' class='order_by_price' data-orderby='property_price' data-order='DESC'>"+
                                "房价价格<i class='fa fa-sort-numeric-desc'></i>"+						
                            "</a>"+
                        "</li>"
            document.getElementById('sortlist').innerHTML=sortdiv;
            var cPage =1;//当前页，默认为1。
            jump2(cPage)
            }
            //b上下
            function b3(){
                var n=JSON.parse(localStorage.getItem('hoteldata'));
                console.log("b上下");
                var n1=n.sort(sortPrice1);
                localStorage.setItem('hotelsortdata',JSON.stringify(n1))
                // console.log(n);
                var sortdiv='';
            sortdiv+="<li class=''>"+
                            "<a href='javascript:a3();' class='order_by_date' data-orderby='property_date' data-order='DESC'>"+
                                "房间大小 <i class='fa fa-sort-amount-desc'></i>"+					
                            "</a>"+
                        "</li>"+
                        "<li class='active'>"+
                            "<a href='javascript:b4();' class='order_by_price' data-orderby='property_price' data-order='ASC'>"+
                                "房价价格<i class='fa fa-sort-numeric-asc'></i>"+						
                            "</a>"+
                        "</li>"
            document.getElementById('sortlist').innerHTML=sortdiv;
            var cPage =1;//当前页，默认为1。
            jump2(cPage)
            }  
            //b上上
            function b4(){
                var n=JSON.parse(localStorage.getItem('hoteldata'));
                console.log("b上上");
                var n1=n.sort(sortPrice2);
                localStorage.setItem('hotelsortdata',JSON.stringify(n1))
                // console.log(n);
                var sortdiv='';
            sortdiv+="<li class=''>"+
                            "<a href='javascript:a4();' class='order_by_date' data-orderby='property_date' data-order='DESC'>"+
                                "房间大小 <i class='fa fa-sort-amount-desc'></i>"+					
                            "</a>"+
                        "</li>"+
                        "<li class='active'>"+
                            "<a href='javascript:b3();' class='order_by_price' data-orderby='property_price' data-order='DESC'>"+
                                "房价价格<i class='fa fa-sort-numeric-desc'></i>"+						
                            "</a>"+
                        "</li>"
            document.getElementById('sortlist').innerHTML=sortdiv;
            var cPage =1;//当前页，默认为1。
            jump2(cPage)
            }       

           

           

            function okay(){
                var f=$('#jumptext').val()
                jump(f);
            }




            //页面改变捕捉
            $("#items_per_page").change(function(){
                // PageSize=-1;
                var sel=document.getElementById('items_per_page');
                PageSize=sel.options[sel.selectedIndex].value;
                console.log("PageSize="+PageSize)
                //本地暂存长度
                localStorage.setItem('hotelPageSize',PageSize)
                // alert(124)
                console.log("PageSize="+PageSize)
                //计算总页数
                PageCount=Math.ceil(count/PageSize);
                localStorage.setItem('hotelPageCount',PageCount)
                console.log("总页数="+PageCount)
                //遍历初始数据并输出
                // console.log("n="+n);
                n=localStorage.getItem('hoteldata');
                // console.log("n="+n);
                var currentPage=1;
                jump(currentPage);
            });
            //确定跳转点击十点
//请求有房的房型
        $.ajax({
        url: "https://douzi.wiki:7000/GROW/api/roomType?page=1&limit=2",
        type: "get",
        dataType: "json",
        contentType: "application/json",
        // async:false,
        success: function (res) {
        console.log(res)
        console.log(res.msg)
        if(res.msg==="成功"){
            var data=''
            console.log(res.data)
            var n=res.data
            console.log(n)
            //数据存本地
            localStorage.setItem('hoteldata',JSON.stringify(res.data))
            
            //数据总数
            count=res.data.length
            console.log("count="+count);
            var h2='';
            var PageSize=0;
            if(localStorage.getItem('hotelPageSize')===null)
            PageSize=12;
            else
            PageSize=localStorage.getItem('hotelPageSize');
            var sel=document.getElementById('items_per_page');
            //每页数量
            for(i=0;i<sindex.length;i++){
                if(PageSize==sindex[i]){
                    sel.options[i].selected=true;
                    console.log("valueindex="+i);
                    // break;
                }   
            }
            console.log("PageSize="+PageSize)
            //计算总页数
            PageCount=Math.ceil(count/PageSize);
            localStorage.setItem('hotelPageCount',PageCount)
            console.log("总页数="+PageCount)
            //遍历初始数据并输出
           
            
            console.log("n=",n)
            // console.log("n[0]="+n[0])
            // console.log("n=n[0][0]"+n[0].name)
            // jump(currentPage);
            var numbb=0;
            if(count<PageSize*currentPage){
                numbb=count;
            }
            else{
                numbb=PageSize*currentPage;
            }
            for(i=(currentPage-1)*PageSize;i<numbb;i++){ 
                // console.log("n="+n)
                var objn=''
                objn=JSON.stringify(n[i])
                // console.log("n[i]="+n[i])
                console.log("objn=",objn)
                h2+="<div class='col-sm-6 col-md-4 p0' onclick='jumptodetails("+(objn)+");'>"+
                "<div class='box-two proerty-item'>"+
                "<div class='item-thumb' > "+
                "<a   href='#' ><img src='./HotelUser/assets/img/demo/property-1.jpg'></a>"+
                "</div>"+
                "<div class='item-entry overflow'>"+
                "<h5><a href='#'>"+n[i].name+"</a><span class='proerty-price pull-right'>￥"+n[i].dayPrice+"</span></h5>"+
                "<div class='dot-hr'></div>"+
                "<span class='pull-left'><b> 面积 :</b> "+n[i].roomArea+"m²</span> <br>"+
                // "<span class='pull-left'><b> 是否含早 :</b> "+"是"+" </span> <br>"+
                // "<span class='pull-left'><b> 有无窗户 :</b>"+"有"+" </span> <br>"+
                // "<span class='pull-left'><b> 是否有WiFi :</b>"+"是"+"</span> <br>"+
                "<p style='display: none;'>"+n[i].describe+"</p>"+
                "<div class='property-icon'>"+
                "<img src='./HotelUser/assets/img/icon/bed.png'>  ("+n[i].numberOfBed+") |"+
                "<img src='./HotelUser/assets/img/icon/shawer.png'>  ("+"2"+") |"+
                "<!-- <img src='./HotelUser/assets/img/icon/cars.png'>(1) -->"+
                "</div>"+
                "</div>"+
                "</div>"+
	            "</div>"
            }
            document.getElementById('list-type').innerHTML=h2;
            pp=$('#jumptext').val();
            console.log("pp="+pp);
            var pg=''
            pg+="<li onclick='jump("+1+");'><a  href='#'>首页</a></li>"+
                "<li onclick='jump("+(currentPage-1)+");'><a  href='#'>前一页</a></li>"+                
                "<span><b>第 <b style='color: #d27e04;font-size: larger;'>"+currentPage+"</b> 页</b></span>"+      
                "<li onclick='jump("+(currentPage+1)+");'><a  href='#'>下一页</a></li>"+
                "<li><a onclick='jump("+PageCount+");' href='#'>尾页</a></li>"+
                "<span>共 <b>"+PageCount+"</b> 页</span>"+
                "<li ><span style='border-right: none;'>到第</span><span><input id='jumptext' type='number' style='width: 80px;' class='pageInput' value='"+currentPage+"'/>页</span></li>"+                                                         
                "<li onclick='okay();'><a  href='#' style='color: black;'>确定</a></li>"
                document.getElementById('pagerow').innerHTML=pg;
                var h='';
                h+="<li> <div class='col-md-3 col-sm-3 col-xs-3 blg-thumb p0'>"+
                "<a href='"+"javascript:todoFun(void)"+"'><img src='"+"./HotelUser/assets/img/demo/small-property-2.jpg"+"'></a>"+
                "<span class='property-seeker'>"+
                "<b class='b-1'>"+"评级"+"</b>"+
                "<b class='b-2'>"+"评级"+"</b>"+
                "</span>"+
                "</div>"+
                " <div class='col-md-8 col-sm-8 col-xs-8 blg-entry'>"+
                "<h6> <a href='"+"#"+"'>"+"房型"+"</a></h6>"+
                "<span class='property-price>"+"价格"+"</span>"+
                "</div>"+
                "</li>"
                // h+="<li> <div class='col-md-3 col-sm-3 col-xs-3 blg-thumb p0'>"+
                // "<a href='"+详情页面+"'><img src='"+"房间图片"+"'></a>"+
                // "<span class='property-seeker'>"+
                // "<b class='b-1'>"+评级+"</b>"+
                // "<b class='b-2'>"+评级+"</b>"+
                // "</span>"+
                // "</div>"+
                // " <div class='col-md-8 col-sm-8 col-xs-8 blg-entry'>"+
                // "<h6> <a href='"+详情页面+"'>"+房型+"</a></h6>"+
                // "<span class='property-price>"+价格+"</span>"+
                // "</div>"+
                // "</li>"
                document.getElementById('recommend').innerHTML=h;

//             // //遍历每一个
//             // $.each(res.data,function(i,n){
               
//             //     h2+="<div class='col-sm-6 col-md-4 p0'>"+
//             //     "<div class='box-two proerty-item'>"+
//             //     "<div class='item-thumb'>"+
//             //     "<a href='property-1.html' ><img src='./HotelUser/assets/img/demo/property-1.jpg'></a>"+
//             //     "</div>"+
//             //     "<div class='item-entry overflow'>"+
//             //     "<h5><a href='property-1.html'>"+n.name+"</a><span class='proerty-price pull-right'>"+n.dayPrice+"</span></h5>"+
//             //     "<div class='dot-hr'></div>"+
//             //     "<span class='pull-left'><b> 面积 :</b> "+n.roomArea+"</span> <br>"+
//             //     // "<span class='pull-left'><b> 是否含早 :</b> "+"是"+" </span> <br>"+
//             //     // "<span class='pull-left'><b> 有无窗户 :</b>"+"有"+" </span> <br>"+
//             //     // "<span class='pull-left'><b> 是否有WiFi :</b>"+"是"+"</span> <br>"+
//             //     "<p style='display: none;'>Suspendisse ultricies Suspendisse ultricies Nulla quis dapibus nisl. Suspendisse ultricies commodo arcu nec pretium ...</p>"+
//             //     "<div class='property-icon'>"+
//             //     "<img src='./HotelUser/assets/img/icon/bed.png'>  ("+n.numberOfBed+") |"+
//             //     "<img src='./HotelUser/assets/img/icon/shawer.png'>  ("+"2"+") |"+
//             //     "<!-- <img src='./HotelUser/assets/img/icon/cars.png'>(1) -->"+
//             //     "</div>"+
//             //     "</div>"+
//             //     "</div>"+
// 	        //     "</div>"
//                // }); 
//             // document.getElementById('list-type').innerHTML=h2;

        }
        },
        error: function (res) {
            alert("访问失败")
        },
    });
            var h='';
            // h+="<li> <div class='col-md-3 col-sm-3 col-xs-3 blg-thumb p0'>"+
            //     "<a href='"+"single.html"+"'><img src='"+"./HotelUser/assets/img/demo/small-property-2.jpg"+"'></a>"+
            //     "<span class='property-seeker'>"+
            //     "<b class='b-1'>"+"A"+"</b>"+
            //     "<b class='b-2'>S</b>"+
            //     "</span>"+
            //     "</div>"+
            //     " <div class='col-md-8 col-sm-8 col-xs-8 blg-entry'>"+
            //     "<h6> <a href='"+"single.html"+"'>"+"大床房"+"</a></h6>"+
            //     "<span class='property-price>"+"3000000￥"+"</span>"+
            //     "</div>"+
            //     "</li>"
                h+="<li> <div class='col-md-3 col-sm-3 col-xs-3 blg-thumb p0'>"+
                "<a href='"+详情页面+"'><img src='"+"./HotelUser/assets/img/demo/small-property-2.jpg"+"'></a>"+
                "<span class='property-seeker'>"+
                "<b class='b-1'>"+评级+"</b>"+
                "<b class='b-2'>"+评级+"</b>"+
                "</span>"+
                "</div>"+
                " <div class='col-md-8 col-sm-8 col-xs-8 blg-entry'>"+
                "<h6> <a href='"+详情页面+"'>"+房型+"</a></h6>"+
                "<span class='property-price>"+价格+"</span>"+
                "</div>"+
                "</li>"
                document.getElementById('recommend').innerHTML=h;
//             // var h2='';
//             // h2+="<div class='col-sm-6 col-md-4 p0'>"+
//             //     "<div class='box-two proerty-item'>"+
//             //     "<div class='item-thumb'>"+
//             //     "<a href='property-1.html' ><img src='./HotelUser/assets/img/demo/property-1.jpg'></a>"+
//             //     "</div>"+
//             //     "<div class='item-entry overflow'>"+
//             //     "<h5><a href='property-1.html'>"+"房型"+"</a><span class='proerty-price pull-right'> ￥ 300,000</span></h5>"+
//             //     "<div class='dot-hr'></div>"+
//             //     "<span class='pull-left'><b> 面积 :</b> "+"120m"+"</span> <br>"+
//             //     // "<span class='pull-left'><b> 是否含早 :</b> "+"是"+" </span> <br>"+
//             //     // "<span class='pull-left'><b> 有无窗户 :</b>"+"有"+" </span> <br>"+
//             //     // "<span class='pull-left'><b> 是否有WiFi :</b>"+"是"+"</span> <br>"+
//             //     "<p style='display: none;'>Suspendisse ultricies Suspendisse ultricies Nulla quis dapibus nisl. Suspendisse ultricies commodo arcu nec pretium ...</p>"+
//             //     "<div class='property-icon'>"+
//             //     "<img src='./HotelUser/assets/img/icon/bed.png'>  ("+"5"+") |"+
//             //     "<img src='./HotelUser/assets/img/icon/shawer.png'>  ("+"2"+") |"+
//             //     "<!-- <img src='./HotelUser/assets/img/icon/cars.png'>(1) -->"+
//             //     "</div>"+
//             //     "</div>"+
//             //     "</div>"+
// 	        //     "</div>"
//             //     document.getElementById('list-type').innerHTML=h2;
// //                 var Count = pageData.length;//记录条数`var PageSize=10;//设置每页示数目
// // var PageSize=1;//规定每页长度
// // var PageCount=Math.ceil(Count/PageSize);//计算总页数
// // var currentPage =1;//当前页，默认为1。
// // //造个简单的分页按钮
// // for(var i=1;i<=PageCount;i++){
// // var pageN='<a href="#" selectPage="'+i+'" >第'+i+'页</a>';
// // $('#page').append(pageN);
// // }
// // //显示默认页（第一页）
// // $('#table').empty().append(head);
// // for(i=(currentPage-1)*PageSize;i<PageSize*currentPage;i++){ 
// //     $('#table').append(pageData[i]);
// // }
// // $('#table').append(end);

// // //显示选择页的内容
// // $('a').click(function(){
// //  var selectPage=$(this).attr('selectPage');
// //  $('#table').html('');
// //     $('#table').append(head);
// //     for(i=(selectPage-1)*PageSize;i<PageSize*selectPage;i++){
// //         $('#table').append(pageData[i]);
// //     }
// //     $('#table').append(end);
// // });
        </script>
    </body>
</html>